<template>
    <div class="header">
        <el-form class="login-certificate" :model="dataForm" :rules="dataRule" :label-position="labelPosition" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="110px" status-icon>
            <el-form-item label="企业名称" prop="orgName">
                <el-input v-model="dataForm.orgName" placeholder="请输入营业执照上企业全称"></el-input>
            </el-form-item>
            <el-form-item label="社会信用代码" prop="certificateCode">
                <el-input v-model="dataForm.certificateCode" placeholder="请输入统一社会信用代码"></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="contact">
                <el-input v-model="dataForm.contact" placeholder="请输入系统实际操作人"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="dataForm.mobile" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item class="yazhengma" label="验证码" prop="code">
              <el-row :gutter="20">
                  <el-col :span="13">
                      <el-input v-model="dataForm.code" placeholder="请输入验证码"></el-input>
                  </el-col>
                  <el-col :span="10" class="login-captcha">
                      <el-button icon="el-icon-mobile-phone" @click="send" style="padding: 10px 10px;" :disabled="disabled=!show" >  
                        <span v-show="show">获取验证码</span>
                        <span v-show="!show" class="count">{{count}} s</span>
                      </el-button>
                  </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
                <el-button class="login-btn-submit" @click="dataFormSubmit()">注册</el-button>
            </el-form-item>
            <el-form-item>
              <div class="register-r">已有账号 ？ <a href="#" @click="registerEdit()">去登录</a></div>
            </el-form-item>
        </el-form>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
            <span style="text-align: center;">注册成功，客服会在两个工作日内与你联系，请耐心等待</span>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="dataFormIndex()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
  import { getUUID } from '@/utils'
  const TIME_COUNT = 60;
  export default {
    data () {
      return {
        labelPosition: 'right',
        dialogVisible:false,
        dataForm: {
          orgName: '',
          certificateCode:'',
          contact:'',
          mobile:'',
          password: '',
          uuid: '',
          code: ''
        },
        dataRule: {
          orgName: [
            { required: true, message: '请输入营业执照上企业全称', trigger: 'blur' }
          ],
          certificateCode: [
            { required: true, message: '请输入统一社会信用代码', trigger: 'blur' }
          ],
          contact: [
            { required: true, message: '请输入系统实际操作人', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '请输入手机号', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { pattern: /^[a-zA-Z0-9\W_]{6,20}$/, message: '密码为数字，大小写字母，长度为6-20位' }
          ],
          code: [
            { required: true, message: '验证码不能为空', trigger: 'blur' }
          ]
        },
        show: true,
        count: '',
        timer: null,
      }
    },
    methods: {
      send(){
          if(!this.dataForm.mobile || this.dataForm.mobile.length != 11){
            this.$message.error("请填写正确的手机号")
            return
          }
          if (!this.timer) {
              this.count = TIME_COUNT
              this.show = false
              this.$http({
                url: this.$http.adornUrl('/sys/sendMobileCaptcha'),
                method: 'get',
                params: this.$http.adornParams({
                  'mobile': this.dataForm.mobile
                })
              }).then(({data}) => {})
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.show = true;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000)
            }
      },
      // 提交表单
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/sys/register'),
              method: 'post',
              data: this.$http.adornData({
                'orgName': this.dataForm.orgName,
                'certificateCode': this.dataForm.certificateCode,
                'contact': this.dataForm.contact,
                'mobile': this.dataForm.mobile,
                'password': this.dataForm.password,
                'uuid': this.dataForm.uuid,
                'code': this.dataForm.code
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message.success(data.msg)
                this.dialogVisible = true
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      dataFormIndex(){
        this.dialogVisible = false
        this.$router.push({name: 'index'})
      },
      registerEdit(){
        this.$emit('registerEdit')
      }
    }
  }
</script>
<style lang="scss">
.login-certificate{
  padding-left: 35px;
  padding-right: 55px;
}
.yazhengma{
  margin-bottom: 0px !important;
}
    .login-title {
      font-size: 16px;
    }
    .login-captcha {
      overflow: hidden;
      > img {
        width: 100%;
        cursor: pointer;
      }
    }
    .login-btn-submit {
      width: 100%;
      margin-top: 15px;
    }

    .el-col-13{
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
    .header {
        margin-top:30px;
        width:100%;
    }
    .login-btn-submit {
        margin-top: 26px !important;
    }
</style>